<template>
  <view class="container screen-width">
    <view class="summary u-flex u-row-around screen-width">
      <view class="item">
        <view class="num">{{ todayV }}</view>
        <view class="name">今日获客</view>
      </view>
      <view class="item">
        <view class="num">{{ totalV }}</view>
        <view class="name">累计获客</view>
      </view>
      <view class="item">
        <view class="num">查看</view>
        <view class="name">统计中心</view>
      </view>
    </view>
    <u-tabs
      :list="tabList"
      :current="current"
      height="100"
      item-width="274"
      bg-color="#f8f9fd"
      @change="handleChange"
    ></u-tabs>
    <scroll-view class="list" :scroll-y="true" @scrolltolower="fetchData()">
      <view class="item u-flex" v-for="(item, index) in list" :key="index">
        <view class="u-flex">
          <u-avatar class="u-m-r-40" size="80" :src="$imgUrl + item.headPortrait"></u-avatar>
          <view class="title">
            <view class="header">
              <text class="name">{{ item.nickName }}</text>
              {{ item.createTime }}
            </view>
            <view>{{ item.articleTitle }}</view>
          </view>
        </view>
      </view>
      <u-loadmore
        bg-color="#fff"
        style="width: 100%;  margin-top: 15rpx;  padding-right: 30rpx"
        :status="status"
      />
    </scroll-view>
    <Festival></Festival>
  </view>
</template>

<script>
import { visitList, visitMostList, visitSummary } from "../../util/api/user";
export default {
  data() {
    return {
      current: 0,
      list: [],
      tabList: [
        {
          name: "最近看我"
        },
        {
          name: "最多看我"
        }
      ],
      params: {
        pageNo: 1,
        pageSize: 15
      },
      status: "loadmore",
      todayV: "",
      totalV: ""
    };
  },
  onLoad() {
    this.fetchData();
    this.fetchSummary();
  },
  methods: {
    handleChange(index) {
      this.current = index;
      this.fetchData(true);
    },
    fetchSummary() {
      visitSummary().then(res => {
        this.todayV = res.result.thatDayTotal;
        this.totalV = res.result.allTotal;
      });
    },
    getPromise() {
      switch (this.current) {
        case 0:
          return visitList(this.params);
        case 1:
          return visitMostList(this.params);
      }
    },
    fetchData(reset = false) {
      if (reset) {
        this.resetPagination();
      }
      uni.showLoading();
      this.status = "loading";
      this.getPromise().then(res => {
        uni.hideLoading();
        this.$nextTick(() => {
          let records = res.result.records;
          // uni.stopPullDownRefresh();
          console.log(records);
          //   this.tabList[this.current]["count"] = res.result.total;
          if (!records.length) {
            this.status = "nomore";
            return;
          }
          this.list = reset ? records : this.list.concat(records);
          this.params.pageNo += 1;
          this.status = "loadmore";
        });
      });
    },
    resetPagination() {
      this.params.pageNo = 1;
      this.list = [];
      this.status = "loadmore";
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .list {
    height: calc(100% - 300rpx);
    width: 100%;
    background: #fff;
    padding: 0 30rpx;

    .item {
      height: 160rpx;
      border-bottom: 1rpx solid #ebebeb;

      .title {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #aaaaaa;

        .header {
          font-size: 22rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #aaaaaa;

          .name {
            color: #1678ff;
            margin-right: 20rpx;
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            text-align: left;
            color: #333333;
          }
        }
      }
    }
  }
}

.summary {
  width: 696rpx;
  height: 160rpx;
  opacity: 1;
  background: #2862ad;
  border-radius: 16rpx;
  margin: 20rpx auto;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .num {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #ffffff;
      margin-bottom: 8rpx;
    }
    .name {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #9fb5db;
    }
  }
}
</style>
